<template>
<div class="all">
	<div class="search-wrap">
		<input id="inp" v-model="query" @keyup.enter="submit()">
      <span @click="notSubmit()">取消</span>
	</div>
	<div class="rm">
		<h4>热门搜索</h4>
		<button v-for="item in hotSearch" @click="serch(item.id)">{{item.name}}</button>
	</div>
</div>
</template>
<script>
	export default{
		name:'search',
		data(){
			return{
				query:'',
				hotSearch:[
					{name: '金刚狼3', id: '25765735'},
			        {name: '一条狗的使命', id: '6873143'},
			        {name: '生化危机:终章', id: '20471852'},
			        {name: '乐高蝙蝠侠', id: '26145033'},
			        {name: '爱乐之城', id: '25934014'},
			        {name: '欢乐好声音', id: '26354572'}
				]
			}
		},
		methods: {
	      submit: function () {
	        this.$router.push({path: '/searchResult', query: { name: this.query }})
	        this.query = ''
	      },
	      serch: function (str) {
	        const path = '/movie/' + str
	        this.$router.push({path: path})
	      },
	      notSubmit: function () {
	        window.history.go(-1)
	      }
	    }
	}
</script>
<style scoped>
	.search-wrap {
    display: flex;
    padding: 10px;
    height: 30px;
  }
  .search-wrap input {
    flex: 1;
    text-decoration: none;
    border: 1px solid #E5E9F2;
    border-radius: 15px;
    padding-left: 2em;
    outline: none;
  }
  .search-wrap span {
    margin-left: 10px;
    font-size: 15px;
    align-self: center;
    cursor: pointer;
  }
  .rm{
  	padding: 10px;
  	line-height: 22px;
  }
  .rm button{
    background-color: #fff;
    border-style: none;
    padding: 5px;
    margin-right: 5px;
    border-radius: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #e54847;
  }
  .rm h3{
  	font-size: 16px;
  }
  .all{ 
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  	overflow: scroll;
  	-webkit-font-smoothing: antialiased;
  	background: #e5e9f2;
  }
</style>